import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import { alpha, useTheme } from '@mui/material/styles';

// ----------------------------------------------------------------------

type VideoTutorialCardProps = {
    title: string;
    thumbnail: string;
    videoUrl: string;
    onPlay: () => void;
};

export function VideoTutorialCard({ title, thumbnail, videoUrl, onPlay }: VideoTutorialCardProps) {
    const theme = useTheme();

    return (
        <Card
            sx={{
                position: 'relative',
                cursor: 'pointer',
                overflow: 'hidden',
                borderRadius: 2,
                transition: 'all 0.3s ease-in-out',
                '&:hover': {
                    transform: 'translateY(-4px)',
                    boxShadow: theme.shadows[8],
                    '& .play-button': {
                        transform: 'scale(1.1)',
                    },
                },
            }}
            onClick={onPlay}
        >
            {/* サムネイル画像 */}
            <Box
                sx={{
                    position: 'relative',
                    paddingTop: '56.25%', // 16:9 アスペクト比
                    backgroundColor: alpha(theme.palette.grey[500], 0.08),
                    backgroundImage: `url(${thumbnail})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                }}
            >
                {/* オーバーレイ */}
                <Box
                    sx={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        backgroundColor: alpha(theme.palette.common.black, 0.3),
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        transition: 'background-color 0.3s',
                        '&:hover': {
                            backgroundColor: alpha(theme.palette.common.black, 0.4),
                        },
                    }}
                >
                    {/* 再生ボタン */}
                    <Box
                        className="play-button"
                        sx={{
                            width: 64,
                            height: 64,
                            borderRadius: '50%',
                            backgroundColor: alpha(theme.palette.primary.main, 0.95),
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            transition: 'all 0.3s ease-in-out',
                            '&:hover': {
                                backgroundColor: theme.palette.primary.main,
                            },
                        }}
                    >
                        {/* 三角形の再生アイコン */}
                        <Box
                            sx={{
                                width: 0,
                                height: 0,
                                borderStyle: 'solid',
                                borderWidth: '12px 0 12px 20px',
                                borderColor: `transparent transparent transparent ${theme.palette.common.white}`,
                                marginLeft: '4px',
                            }}
                        />
                    </Box>
                </Box>

                {/* タイトル */}
                <Box
                    sx={{
                        position: 'absolute',
                        top: 16,
                        left: 16,
                        right: 16,
                        color: theme.palette.common.white,
                        fontSize: '1rem',
                        fontWeight: 700,
                        textShadow: `2px 2px 4px ${alpha(theme.palette.common.black, 0.6)}`,
                        lineHeight: 1.5,
                    }}
                >
                    {title}
                </Box>
            </Box>
        </Card>
    );
}
